class DropZones {
    constructor() {
    }

    init() {
        this.fieldsContainer = document.getElementById('fields-container');
        this.buttonContainer = document.getElementById('button-container');
        this.onloadContainer = document.getElementById('onload-container');
        this.onsaveContainer = document.getElementById('onsave-container');

        // 2. 定义所有放置区域
        const dropZones = [
            { element: this.fieldsContainer, type: 'field' },
            { element: this.buttonContainer, type: 'buttons' },
            { element: this.onloadContainer, type: 'onLoad' },
            { element: this.onsaveContainer, type: 'onSave' }
        ];

        this.bindDrop(dropZones);
    }
    bindDrop(dropZones) {
        let _this = this;
        dropZones.forEach(zone => {
            // 拖拽进入区域
            zone.element.addEventListener('dragenter', (e) => {
                e.preventDefault();
                zone.element.style.backgroundColor = '#f0f8ff';
            });

            // 拖拽经过区域
            zone.element.addEventListener('dragover', (e) => {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'copy';
            });

            // 拖拽离开区域
            zone.element.addEventListener('dragleave', (e) => {
                if (e.target === zone.element) {
                    zone.element.style.backgroundColor = '';
                }
            });

            // 放置元素
            zone.element.addEventListener('drop', (e) => {
                e.preventDefault();
                zone.element.style.backgroundColor = '';

                const type = e.dataTransfer.getData('text/plain');
                const dropType = zone.type;

                if (dropType === 'field') {
                    // 验证是否为表单组件类型
                    const formComponents = ['input', 'select', 'textarea', 'image-list-upload', 'button', 'label', 'geo-location', 'input-number'];
                    if (!formComponents.includes(type)) {
                        alert('只能放置表单字段组件（如输入框、下拉框等）');
                        return;
                    }
                    handleFieldDrop(type);
                } else if (dropType === 'buttons') {
                    // 验证是否为生命周期动作类型
                    const actionTypes = ['button-ok', 'button-cancel', 'button-close','button-locate'];
                    if (!actionTypes.includes(type)) {
                        alert('只能放置生命周期动作（如获取数据、调用接口等）');
                        return;
                    }
                    handleActionDrop(type, dropType);
                }else if (dropType === 'onLoad') {
                    // 验证是否为生命周期动作类型
                    const actionTypes = ['fetch-model-data', 'field-transform', 'map-locate',  'fetch-select-options'];
                    if (!actionTypes.includes(type)) {
                        alert('只能放置生命周期动作（如获取数据、调用接口等）');
                        return;
                    }
                    handleActionDrop(type, dropType);
                }
                else if (dropType === 'onSave') {
                    // 验证是否为生命周期动作类型
                    const actionTypes = ['save-model-data', 'insert-model-data', 'upload-img', 'upload-file', 'field-transform'];
                    if (!actionTypes.includes(type)) {
                        alert('只能放置生命周期动作（如获取数据、调用接口等）');
                        return;
                    }
                    handleActionDrop(type, dropType);
                }
                updateJsonPreview();
            });
        });

    }

    getContainer(dropType) {
        switch (dropType) {
            case 'field':
                return this.fieldsContainer;
            case 'buttons':
                return this.buttonContainer;
            case 'onLoad':
                return this.onloadContainer;
            case 'onSave':
                return this.onsaveContainer;
            default:
                return null;
        }
    }
}
export default new DropZones();